<template>
  <a-config-provider :autoInsertSpaceInButton="false">
    <div id="app">
      <!-- <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive> -->
      <router-view v-if="isRouterAlive"></router-view>
      <LoginModal></LoginModal>
      <ForgetModal></ForgetModal>
    </div>
  </a-config-provider>
</template>
<script>
import { mapMutations } from "vuex";
import { configProvider } from "ant-design-vue";
import LoginModal from "@/components/common/loginModal";
import ForgetModal from "@/components/common/forgetModal";
import $ from "jquery";
import { getQueryString } from "@/utils/tools";
export default {
  name:'app',
  provide(){
    return {
      reload:this.reload
    }
  },
  components: {
    AConfigProvider: configProvider,
    LoginModal,
    ForgetModal,
  },
  data() {
    return {
      timer: "",
      isRouterAlive:true
    };
  },
  methods: {
    ...mapMutations(["setLogin"]),
    sendToParent() {
      window.parent.postMessage(
        {
          cmd: "loaded",
          msg: "ok",
        },
        "*"
      );
    },
    scrollMidView(e) {
      console.log(window.__operator__, "操作端---=-==");
      if (window.__operator__ || window.__operator__ === undefined)
        return false;
      const __target =
        $(e.target).closest(".js-scroll-el")[0] || e.target || e.srcElement;
      console.log(__target, "---scroll target");
      const __scrollBoxDom = $(__target).parents(".scrolToMinView")[0]; // eslint-disable-line
      console.log(__target);
      console.log(__scrollBoxDom);
      if (__target && __scrollBoxDom) {
        window[`bs:event:scroll:close`] = true;
        const __boxScrollTop = __scrollBoxDom.scrollTop;
        const __boxoffsetTop = __scrollBoxDom.offsetTop;
        const __boxHeight = __scrollBoxDom.clientHeight;
        const __offsetTop = __target.offsetTop;
        let top = __offsetTop - __boxHeight / 2;
        console.log(
          top,
          __offsetTop,
          __boxHeight,
          __boxScrollTop,
          "=======top"
        );
        __scrollBoxDom.scrollTo({
          top: top,
        });

        // if (top === __scrollBoxDom.scrollTop) {
        //   window[`bs:event:scroll:close`] = false
        // }
        console.log(top, "-=-=-=--top");
        setTimeout(() => {
          window[`bs:event:scroll:close`] = false;
        }, 1000);
      }
      // 下面的注释暂不要删除，滚动调试稳定测试完后删除
      // document.querySelector(".article-content").scrollTo(0, __offsetTop + __boxScrollTop - __boxoffsetTop -  __boxHeight/2)
    },
    reload(){
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  },
  mounted() {
    this.sendToParent();
    window.addEventListener("message", (msg) => {
      let class_mode = getQueryString("class_mode") || "PAD_121";
      let childUser = null;
      // console.log(msg.data, "----children frame");
      if (msg.data.cmd === "login") {
        msg.data.msg = msg.data.msg || {};
        // 监课身份处理
        if (getQueryString("is_check")) {
          !msg.data.msg.userInfo && (msg.data.msg.userInfo = {});
          msg.data.msg.userInfo.is_assist = /PAD_121/i.test(class_mode) ? 1 : 0;
        }
        let needSync = false;
        window._zParentUser = msg.data.msg;
        childUser = JSON.parse(window.localStorage.getItem("vuexStoragePad"));
        if (!childUser) needSync = true;
        else {
          if (/_121/.test(class_mode)) {
            if (window._zParentUser.userInfo.is_assist == 0) needSync = true;
          } else if (/_SMALL/i.test(class_mode)) {
            if (window._zParentUser.userInfo.is_assist == 1) needSync = true;
          }
        }
        !!needSync && this.setLogin(msg.data.msg);
      } else if (msg.data.cmd === "browserSync") {
        window.___browserSync___._zcontroller = msg.data.msg.controller;
      } else if (msg.data.cmd == "PAD:ROOM") {
        switch (msg.data.event) {
          case "SOCKET":
            window.___browserSync___.socket.emit(...msg.data.args);
            break;
          case "WINDOW:OPRATER":
            console.log("设置pad操作者", msg.data.args);
            window.__operator__ = msg.data.args;
            break;
        }
      }
    });
    document.body.addEventListener("click", this.scrollMidView, true);
  },
};
</script>
<style lang="less">
@import "./assets/style/base.less";
body,
html,
p,
h3 {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  min-width: 1000px;
  height: 100%;
  div {
    -webkit-user-select: none;
    color: #333;
  }
  a {
    color: @primary-color;
  }
}
[v-cloak] {
  display: none;
}
#app {
  position: relative;
  font-family: "Microsoft YaHei", "SF Pro Text", Arial, Helvetica, Sans-Serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  background-color: #f0f2f4;
  letter-spacing: 1px;
  text-indent: 1px;
  min-width: 1010px;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
em {
  font-style: normal;
}
.mark {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
}
.ant-slider-handle {
  display: none;
}
/*定义了滚动条整体样式；*/
.yxp-composition-main,
.content-wrap,
.train-box,
.train-box1,
.yxp-word-box,
.list-wrap,
.skill-info,
.yxp-screen-box,
.content-modal-pop {
  &::-webkit-scrollbar {
    width: 10px !important;
  }
}

/*定义了滚动条滑块的样式*/
.yxp-composition-main,
.content-wrap,
.train-box,
.train-box1,
.yxp-word-box,
.list-wrap,
.skill-info,
.yxp-screen-box,
.content-modal-pop {
  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    width: 6px;
    background-color: #c7d2dd;
  }
}
/*定义了轨道的样式*/
.yxp-composition-main,
.content-wrap,
.train-box,
.train-box1,
.yxp-word-box,
.list-wrap,
.skill-info,
.yxp-screen-box,
.content-modal-pop {
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    width: 10px;
    border-radius: 8px;
    background: #f2f4f5;
  }
}
</style>
